feat(FilterSummaryBar): active-filter summary bar for data grids - #400

src/components/FilterSummaryBar/FilterSummaryBar.tsx:125

• The combined state renders a hardcoded "+ search" suffix, which is user-visible and not overridable for i18n (and it also differs from the searchActiveLabel text used in the search-only state).

        {hasSearchText && activeFilterCount === 0 && (
          <> &mdash; {searchActiveLabel}</>
        )}
        {hasSearchText && activeFilterCount > 0 && <> + search</>}
        {!isFiltering && showWhenIdle && <> &mdash; {allVisibleLabel}</>}

Previously missed (3) — in code that hasn't changed since the last review.

src/components/FilterSummaryBar/FilterSummaryBar.tsx:84

• The live region is missing explicit aria-live configuration. Elsewhere in the codebase, status regions typically specify aria-live (and often aria-atomic) to ensure consistent announcements (e.g. DropzoneOverlay.tsx:97-99, ConnectionStatus.tsx:386-389). Adding these here makes the announcement behavior more predictable across screen readers.

    <div
      ref={ref}
      role="status"
      className={cn(

src/components/FilterSummaryBar/FilterSummaryBar.tsx:148

• Add a displayName for the forwarded-ref component. Many components in this repo set it for better DevTools output (e.g. Avatar.tsx:122, Alert.tsx:106).

});

src/components/FilterSummaryBar/FilterSummaryBar.tsx:140

• The "Clear all" button doesn’t include the project’s standard focus-visible ring styles, which can make keyboard focus hard to see. Other inline icon buttons include these classes (e.g. Alert.tsx:91-95, CountBadge.tsx:43-44).

          className={cn(
            'ms-auto flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors',
            'text-primary-700 hover:bg-primary-500/15 dark:text-primary-300'
          )}

Previously missed (1) — in code that hasn't changed since the last review.

src/components/FilterSummaryBar/FilterSummaryBar.tsx:94

• {...props} is spread after role="status", so a consumer-provided role prop can override the status role and break the intended assistive-tech announcement behavior. If the role should always be status, spread props first (or strip role from incoming props) so it can’t be overridden.

src/components/FilterSummaryBar/FilterSummaryBar.test.tsx:67

• This assertion assumes an en-US thousands separator ("8,911"), but toLocaleString() output depends on the runtime’s default locale and the test setup doesn’t configure one. Using a regex here avoids locale-dependent failures while still verifying the content.

    expect(screen.getByRole('status')).toHaveTextContent('1 of 8,911 record —');

Previously missed (3) — in code that hasn't changed since the last review.

src/components/FilterSummaryBar/FilterSummaryBar.tsx:94

• {...props} is spread after role="status", so a consumer-provided role will override the live-region behavior (and potentially break the accessibility guarantee implied by the component). Move the spread before role to keep the status role enforced.
  src/components/FilterSummaryBar/FilterSummaryBar.tsx:133
• PR description says the idle state (when showWhenIdle is true and no filters/search are active) “reads "all records visible"”, but the current render still includes counts/record labels and appends “— all records visible”. If the intended UX is label-only while idle, the render logic should switch to only allVisibleLabel (and tests/stories updated accordingly).
  src/components/FilterSummaryBar/FilterSummaryBar.tsx:10
• The prop doc says consumers can pass 0 when totalCount is unknown, but 0 can also be a valid known total (empty dataset). Suggest documenting undefined as the “unknown” signal and letting 0 mean an actual total of zero.

This issue also appears on line 110 of the same file.

src/components/FilterSummaryBar/FilterSummaryBar.tsx:110

• totalCount is rendered only when it’s truthy ({totalCount ? ...}), which means a valid totalCount={0} (empty dataset) will incorrectly omit the “of 0” portion. Consider checking for a finite number so 0 still renders and undefined/NaN do not.

        {totalCount ? (

• pnpm-lock.yaml: Generated file

• pnpm-lock.yaml: Generated file

• pnpm-lock.yaml: Generated file